<template>
	<view>

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="我要提现" back-icon-color="#000" :is-back="true" title-color="#000"
			:background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<view class="tx_wrap">
			<view class="tx_title">提现账户</view>

			<view class="type_wrap">
				<u-row gutter="20">
					<u-col span="6" v-for="(item,index) in itemslist" :key="index" @click="NewradioChange(item)">
						<view class="demo-layout" :class="[NewPayType === item.name?'demo-layouta':'']">
							<image v-if="item.name == '支付宝'" :src="BestImgUrl + 'me/set_alipayicon.png'"></image>
							<image v-else src="/static/images/weixinzhifu.png"></image>
							<view>{{item.name}}</view>
						</view>
					</u-col>
				</u-row>
			</view>

			<!-- <view>
				<view class="page_conterWrapss" v-if="Province == '福建省' || Province == '福建'">
					<view class="hy_box_wrapss" @click="Totixian()">
						<view class="hy_box_infoss">
							<view class="hy_pricess">旧版提现入口</view>
						</view>
						<view class="right_iconss">
							<view>立即提现</view>
							<u-icon name="arrow-right" size="38" color="#FF611E"></u-icon>
						</view>
					</view>
				</view>
			</view> -->

		</view>

		<view class="tx_wrap2">
			<u-cell-group :border="false">

				<!-- #ifdef APP-PLUS -->
				<u-cell-item v-if="NewPayType === '微信'" hover-class="cell-hover-class" arrow @click="ToPages"
					index="10">
					<view slot="title" class="l_title">
            <image class="l_icon" src="/static/images/weixinzhifu.png" mode="widthFix"></image>微信账号
					</view>
					<view slot="icon"></view>
					<view slot="right-icon">
						<view class="mytx" v-if="!userinfo.app_openid">
							<text>去绑定</text>
						</view>
						<view class="mytx" v-else>
							<image :src="userinfo.avatar"></image>
						</view>
					</view>
				</u-cell-item>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<u-cell-item v-if="NewPayType === '微信'" hover-class="cell-hover-class" arrow @click="ToPages"
					index="10">
					<view slot="title" class="l_title">
            <image class="l_icon" src="/static/images/weixinzhifu.png" mode="widthFix"></image>微信账号
					</view>
					<view slot="icon"></view>
					<view slot="right-icon">
						<view class="mytx" v-if="!userinfo.applet_openid">
							<text>去绑定</text>
						</view>
						<view class="mytx" v-else>
							<image :src="userinfo.avatar"></image>
						</view>
					</view>
				</u-cell-item>
				<!-- #endif -->

				<!-- #ifdef H5 -->
				<u-cell-item v-if="NewPayType === '微信'" hover-class="cell-hover-class"
					:value="userinfo.nickname || '你还没有昵称'" @click="tosetNikname" arrow index="10">
					<view slot="title" class="l_title">
            <image class="l_icon" src="/static/images/weixinzhifu.png" mode="widthFix"></image>微信账号
					</view>
				</u-cell-item>
				<!-- #endif -->

				<u-cell-item v-if="NewPayType === '支付宝'" hover-class="cell-hover-class"
					:value="alipayInfo.alipay_number || '去绑定'" arrow @click="ToPages" index="9">
					<view slot="title" class="l_title">
						<image class="l_icon" :src="BestImgUrl + 'me/set_smicon.png'" mode="widthFix"></image>支付宝账号
					</view>
					<view slot="icon"></view>
				</u-cell-item>

			</u-cell-group>
		</view>

		<view>
			<view class="page-wrap">
				<view class="tixian-box">
					<view class="tixina-title">提现金额</view>
					<view class="shuru-box">
						<view class="fuhao">￥</view>



						<!-- #ifdef H5 -->
						<input v-model="jine" :value="jine" type="number" placeholder="请输入提现金额" placeholder-class="co"
							@input="oninput" @blur="onIptSize" />
						<!-- #endif -->

						<!-- #ifdef MP-WEIXIN -->
						<input v-model="jine" type="decimal" placeholder="请输入提现金额" placeholder-class="co"
							@input="oninput" @blur="onIptSize" />
						<!-- #endif -->

						<!-- #ifdef APP-PLUS -->
						<input :value="jine" type="number" placeholder="请输入提现金额" placeholder-class="co" @input="oninput"
							@blur="onIptSize" />
						<!-- #endif -->

					</view>
					<view class="bottom-info">
						<view>钱包余额:￥{{userinfo.money || '0.00'}}</view>
						<view @click="allti()">全部提现</view>
					</view>
				</view>
				<view class="tishibox">
					*提现金额至少10元，每日最高可提现100元，如每月推广收益或者补贴<span>高于6000元</span>，请联系客服申请提额。
				</view>
			</view>
		</view>

		<view class="lijipay" v-if="NewPayType === '支付宝'">
			<u-button type="warning" shape="circle" :ripple="false" :disabled="disabled" :loading="Payloading"
				@click="openpass()">提现到支付宝</u-button>
		</view>

		<view class="lijipay" v-if="NewPayType === '微信'">
			<u-button type="warning" shape="circle" :ripple="false" :disabled="disabled" :loading="Payloading"
				@click="openpasswx()">提现到微信</u-button>
		</view>

		<!--<lyy-pass-input ref="passInput" title="提现" :money="jine" @confirm="confirm" @close="close">
			<template slot="extend"></template>
		</lyy-pass-input>-->

	</view>
</template>

<script>
	const app = getApp();
	import utils from '@/public/utils.js';
	export default {
		data() {
			return {
				BestImgUrl: app.globalData.imgurlBwc,
				itemslist: [],
				//提现方式：apliay支付宝 wechat微信公众号 applet_wechat微信小程序提现 app_wechat 微信APP提现
				items: [{
						value: 'alipay',
						int: '支付宝',
						image: app.globalData.imgurlBwc + "me/set_alipayicon.png"
					},
					{

						// #ifdef APP-PLUS
						value: 'applet_wechat',
						// #endif

						// #ifdef MP-WEIXIN
						value: 'app_wechat',
						// #endif

						// #ifdef H5
						value: 'wechat',
						// #endif


						int: '微信',
						image: app.globalData.imgurlBwc + "me/set_wxicon.png"
					}
				],

				paytypevalue: "",
				NewPayType: '',

				disabled: true,

				jine: '',
				Payloading: false,

				userinfo: {},
				alipayInfo: {},
				cash_Password: '',
				Province: '',
				is_appid: ""
			}
		},
		onLoad() {
			let appid = uni.getStorageSync('miniProgramAppId');
			this.is_appid = appid
		},
		onShow() {
			this.gettxtype()
			this.getAliPayInfo()
			this.getmyinfo()

			//获取省份判断是否显示旧版提现入口
			let shengfen = uni.getStorageSync('Province') || '';
			this.Province = shengfen

		},
		methods: {
			getmyinfo() {
				let that = this
				that.$api.GetuserInfo({}).then(res => {
					console.log('个人信息', res.data.result)
					that.userinfo = res.data.result
				})
			},
			tosetNikname() {
				uni.navigateTo({
					url: '/subpackageA/pages/infoEdit'
				})
			},
			gettxtype() {
				let that = this
				that.$api.getTixianType({

					// #ifdef APP-PLUS
					client: 'app',
					// #endif

					// #ifdef MP-WEIXIN
					client: 'applet',
					// #endif

					// #ifdef H5
					client: 'h5',
					// #endif

				}).then(res => {
					console.log('提现方式', res.data.result)
					that.itemslist = res.data.result.reverse()
					that.NewPayType = that.itemslist[0].name
					that.paytypevalue = that.itemslist[0].pay_type
				})
			},







			//校验输入的金额大小
			onIptSize(e) {
				let that = this
				let myid = uni.getStorageSync('userinfo').id
				////console.log(e)
				let num = parseInt(e.detail.value)
        // TODO 金额限制
				if (num < 0) {
					uni.showToast({
						title: '最低提现10元',
						icon: 'none'
					});
					this.jine = ''
					that.disabled = true
				} else if (num > 100 && myid != 2) {
					uni.showToast({
						title: '单笔最多提现100元',
						icon: 'none'
					});
					this.jine = ''
					that.disabled = true
				}
			},
			async oninput(e) {
				let that = this
				let val = e.detail.value

				if (!val) {
					that.disabled = true
				} else {
					that.disabled = false
					let newnum = await this.jiaoyanNum(val)
					////console.log(newnum)
					that.$nextTick(() => {
						that.jine = newnum
					})

					//只能输入0-100
					//let zhengshu =  RegExp('(^(\\d|[1-9]\\d)(\\.\\d{1,2})?$)|(^100$)').test(val)
					//false代表大于100了 true代表100内
					/*if(!zhengshu) {
						//false
						uni.showToast({
							title: '单笔最多100',
							icon: 'none',
							duration: 2000
						});
						that.$nextTick(() => {
							that.jine = ''
						})
					}else {
						
					}*/
				}
				////console.log('事实上', val)
			},
			getAliPayInfo() {
				let that = this
				that.$api.getaliPayinfo({

				}).then(res => {
					that.alipayInfo = res.data.result
				}).catch(err => {
					uni.showToast({
						title: err.data.msg,
						icon: 'none',
						duration: 2000
					});
				})
			},
			//选择支付方式
			NewradioChange(evt) {
				console.log('选择支付', evt.pay_type)
				this.NewPayType = evt.name
				this.paytypevalue = evt.pay_type
			},
			ToPages(e) {
				let appid = this.is_appid;
				//&& appid != "wx3b96794d5a491689"
				if (e == 9) {
					// uni.navigateTo({
					// 	url: '/mePages/pages/BasicSettings/SetAlipay'
					// })
				} else if (e == 10) {
					uni.navigateTo({
						url: '/mePages/pages/BasicSettings/ChangebindingWeChat'
					})
				}
			},
			//全部提现
			allti() {
				let that = this

				let myid = uni.getStorageSync('userinfo').id

				if (that.userinfo.money == '0.00' || that.userinfo.money == '0') {
					uni.showToast({
						title: '余额不足',
						icon: 'none'
					});
					this.jine = ''
				} else {
					let num = parseInt(that.userinfo.money)
					if (num < 10) {
						uni.showToast({
							title: '最低提现10元',
							icon: 'none'
						});
						this.jine = ''
						that.disabled = true
					} else if (num > 100 && myid != 2) {
						uni.showToast({
							title: '单笔最多提现100元',
							icon: 'none'
						});
						this.jine = ''
						that.disabled = true
					} else {
						this.jine = that.userinfo.money
						that.disabled = false
					}
				}



			},
			//立即提现到支付宝
			openpass() {

				//1，提示余额不足  2，提示请输入提现账号  3，监测是否设置提现账号

				let that = this
				if (that.paytypevalue == '') {
					uni.showToast({
						title: '请选择提现方式',
						icon: 'none',
						duration: 2000
					})
				} else if (that.userinfo.money == '0.00' || that.jine == '0') {
					uni.showToast({
						title: '余额不足',
						icon: 'none',
						duration: 2000
					})
				} else if (parseInt(that.jine) > that.userinfo.money) {
					uni.showToast({
						title: '余额不足',
						icon: 'none',
						duration: 2000
					})
				} else if (that.jine == '') {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none',
						duration: 2000
					});
				} else if (that.alipayInfo.alipay_number == '') {
					uni.showToast({
						title: '请先设置提现账号',
						icon: 'none',
						duration: 2000
					});
				} else {
					//弹出提现密码输入
					//this.$refs.passInput.open()
					this.lipay()
				}
			},
			//立即提现到微信
			openpasswx() {
				//1，提示余额不足  2，提示请输入提现账号  3，监测是否设置提现账号

				let that = this
				if (that.paytypevalue == '') {
					uni.showToast({
						title: '请选择提现方式',
						icon: 'none',
						duration: 2000
					})
				} else if (that.userinfo.money == '0.00' || that.jine == '0') {
					uni.showToast({
						title: '余额不足',
						icon: 'none',
						duration: 2000
					})
				} else if (parseInt(that.jine) > that.userinfo.money) {
					uni.showToast({
						title: '余额不足',
						icon: 'none',
						duration: 2000
					})
				} else if (that.jine == '') {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none',
						duration: 2000
					});
				}

				// #ifdef APP-PLUS
				else if (that.userinfo.app_openid == "") {
					uni.showToast({
						title: '请先绑定微信账号',
						icon: 'none',
						duration: 2000
					});
				}
				// #endif

				// #ifdef MP-WEIXIN
				else if (that.userinfo.applet_openid == "") {
					uni.showToast({
						title: '请先绑定微信账号',
						icon: 'none',
						duration: 2000
					});
				}
				// #endif

				// #ifdef H5
				else if (that.userinfo.openid == "") {
					uni.showToast({
						title: '请先绑定微信账号',
						icon: 'none',
						duration: 2000
					});
				}
				// #endif
				else {
					//弹出提现密码输入
					//this.$refs.passInput.open()
					this.lipay()
				}
			},
			//提现密码输入完毕
			confirm(e) {
				//console.log(e)
				this.cash_Password = e.pass
				this.$refs.passInput.close()
				this.lipay()
			},
			//提现密码取消
			close() {
				//console.log('close')
			},
			//开始提现请求
			lipay() {
				let that = this
				that.Payloading = true
				setTimeout(() => {
					that.Payloading = false

					that.$api.Withdrawalofbalance({
						amount: that.jine,
						//cash_password: that.cash_Password,
						pay_type: that.paytypevalue, //提现方式：apliay支付宝 wechat微信公众号 applet_wechat微信小程序提现 app_wechat 微信APP提现
						appid: uni.getStorageSync('miniProgramAppId')
					}).then(res => {
						that.disabled = true
						// uni.navigateTo({
						// 	url: '/mePages/pages/Withdrawalok?title=' + '提现成功' + '&miaoshu=' + '红包预计2小时内到账'
						// })

						if (wx.canIUse('requestMerchantTransfer')) {
							wx.requestMerchantTransfer({
								mchId: res.data.result.mch_id, // 商户号
								appId: uni.getStorageSync('miniProgramAppId'), // appId
								package: res.data.result.package_info, // 商家转账付款单跳转收款页package信息
								success: (resxx) => {
									// res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
									console.log('success:', resxx);
									that.getmyinfo()
								},
								fail: (resxx) => {
									console.log('fail:', resxx);
									that.getmyinfo()
								},
							});
						} else {
							wx.showModal({
								content: '你的微信版本过低，请更新至最新版本。',
								showCancel: false,
							});
						}

					}).catch(err => {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						});
					})
				}, 2000)
			},
			//只能输入两位小数
			jiaoyanNum(val) {
				val = val.replace(/[^\d.]/g, ""); //保留数字
				val = val.replace(/^00/, "0."); //开头不能有两个0
				val = val.replace(/^\./g, "0."); //开头为小数点转换为0.
				val = val.replace(/\.{2,}/g, "."); //两个以上的小数点转换成一个
				val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); //只保留一个小数点
				/^0\d+/.test(val) ? val = val.slice(1) : ''; //两位以上数字开头不能为0
				const str = '^(\\d+)\\.(\\d{' + 2 + '}).*$'
				const reg = new RegExp(str)
				if (2 === 0) {
					// 不需要小数点
					val = val.replace(reg, '$1')
				} else {
					// 通过正则保留小数点后指定的位数
					val = val.replace(reg, '$1.$2')
				}
				return val
			},


















			Totixian() {

				//#ifdef APP-PLUS
				plus.share.getServices(function(res) {
					var sweixin = null;
					for (var i = 0; i < res.length; i++) {
						var t = res[i];
						if (t.id == 'weixin') {
							sweixin = t;
						}
					}
					if (sweixin) {
						sweixin.launchMiniProgram({
							id: 'gh_31b154941aed',
							path: 'pages/member/getcash',
							type: 0 // 微信小程序版本类型可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0
						});
					}
				}, function(res) {});
				//#endif



				// #ifdef MP-WEIXIN
				uni.navigateToMiniProgram({
					appId: 'wxcc72c55b6fa65dfb',
					path: 'pages/member/getcash',
					envVersion: 'release',
					success(res) {}
				});
				// #endif


			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F9F6F5;
	}

	/deep/ .u-border-bottom:after {
		border-width: 0 !important;
	}

	.mytx {
		image {
			width: 50rpx;
			height: 50rpx;
			border-radius: 200rpx;
		}
	}

	.type_wrap {
		.demo-layout {
			background-color: #F7F7F7;
			border: 2px solid #F7F7F7;
			border-radius: 18rpx;
			height: 150rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding-left: 34rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 10rpx;
			}
		}

		.demo-layouta {
			background-color: #f3fff8;
			border: 2px solid #50d381;
		}
	}

	.extend {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		margin: 20rpx 0;

		&-title {
			color: #555
		}
	}

	.tx_wrap {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 0 0 30rpx 30rpx;

		.u-cell {
			padding: 13px 0 !important;
		}

		.tx_title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}

	.tx_wrap2 {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;

		.u-cell {
			padding: 0 0 !important;
		}

		.tx_title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}

	.l_title {
		display: flex;
		align-items: center;

		.l_icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}

	.wx_info {
		display: flex;
		align-items: center;

		.my_wx_cion {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
			border-radius: 200rpx;
		}
	}

	.check_icon {
		width: 44rpx;
		height: 44rpx;
		position: relative;
		top: 5rpx;
		margin-right: 0rpx;
	}

	.tishibox {
		color: #999999;
		margin-top: 42rpx;
		font-size: 24rpx;

		span {
			color: #FF4910;
		}
	}

	.tixian-box {
		border-radius: 20rpx;
		background-color: #ffffff;

		.tixina-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.shuru-box {
			border-bottom: 1px solid #D9D9D9;
			padding-bottom: 30rpx;
			display: flex;
			align-items: center;

			/deep/ .u-input__input {
				font-size: 44rpx !important;
			}

			/deep/ .uni-input-input {
				font-size: 54rpx !important;
			}

			.fuhao {
				font-size: 60rpx;
			}
		}

		.bottom-info {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-top: 30rpx;
			color: #999;
			font-size: 24rpx;

			view:nth-child(2) {
				color: #FF4910;
				padding-left: 10rpx;
			}
		}
	}

	/deep/ input {
		text-align: left !important;
		flex: 1;
		font-size: 42rpx;
		width: 100%;
		color: #333;
	}

	.co {
		text-align: left;
		color: #ccc !important;
		font-size: 42rpx;
	}

	.page-wrap {
		padding: 30rpx;
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
		margin-top: 30rpx;
		height: 1200rpx;
	}

	.lijipay {
		width: 100%;
		margin-top: 100rpx;
		position: fixed;
		bottom: 2%;
		width: 92%;
		margin: 0 auto;
		left: 0;
		right: 0;

		.u-size-default {
			height: 80rpx !important;
			line-height: 80rpx !important;
			//background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
			color: #fff;
		}
	}

	.page_conterWrapss {

		.hy_box_wrapss {
			border: 2px solid #ffffff;
			padding: 24rpx 30rpx 24rpx 30rpx;
			background-image: linear-gradient(to left, #FFDCD4, #FFEED4);
			border-radius: 20rpx;
			margin: 30rpx 0 0 0;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: relative;
			z-index: 99;

			.hy_box_infoss {
				flex: 1;

				.hy_pricess {
					font-size: 32rpx;
					font-weight: bold;
					color: #575757;

					span {
						color: #FF611E !important;
					}
				}

				.hy_zxbtss {
					color: #666;
					font-size: 28rpx;
				}
			}

			.right_iconss {
				font-weight: bold;
				color: #FF611E;
				margin-left: auto;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>